<template>
  <a-card class="tree-card">
    <a-tree
      showLine
      v-if="treeData.length"
      :checkable="checkable"
      :defaultExpandParent="defaultExpandParent"
      :defaultExpandAll="defaultExpandAll"
      :defaultSelectedKeys="defaultSelectedKeys"
      v-model="checkedKeys"
      @select="onSelect"
      @check="check"
      :selectedKeys="selectedKeys"
      :treeData="treeData"
    >
      <slot></slot>
    </a-tree>
  </a-card>
</template>

<script>
export default {
  props: {
    defaultExpandParent: {
      type: Boolean,
      default: false
    },
    defaultExpandAll: {
      type: Boolean,
      default: false
    },
    treeData: {
      type: Array,
      required: true
    },
    checkable: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      checkedKeys: [],
      selectedKeys: [],
      defaultSelectedKeys: []
    }
  },
  watch: {
    checkedKeys(val) {
      this.$emit('treeCheck', val)
    }
  },
  methods: {
    getKeys(arr) {
      this.checkedKeys = arr
      this.selectedKeys = arr
    },
    onExpand(expandedKeys) {
      console.log('onExpand', expandedKeys)
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    onCheck(checkedKeys) {
      this.checkedKeys = checkedKeys
    },
    onSelect(selectedKeys, info) {
      let selectObj = {}
      if (selectedKeys.length > 0) {
        selectObj = { parentName: info.node.title, parentId: selectedKeys[0] }
      } else {
        selectObj = { parentName: '', parentId: '' }
      }
      this.selectedKeys = selectedKeys
      this.$nextTick(() => {
        this.$emit('changeTree', selectObj)
      })
    },
    check(checkedKeys, info) {
      this.$emit('check', checkedKeys, info)
    }
  }
}
</script>

<style scoped>
.tree-card >>> .ant-card-body {
  overflow-y: scroll;
  height: 500px;
}
</style>
